<template>
  <div class="info-dialog">
    <el-dialog
      :visible.sync="visible"
      :title="title"
      :modal-append-to-body="true"
      :append-to-body="true"
      :destroy-on-close="false"
      :close-on-click-modal="false"
      :modal="true"
      top="10vh"
      @closed="closed"
    >
      <el-form ref="rangeForms" :model="rangeForm" :rules="rules">
        <el-form-item label-width="120px" label="名称" prop="name">
          <el-input v-model="rangeForm.name" placeholder="请输入名称" autocomplete="off" />
        </el-form-item>

        <el-form-item label-width="120px" label="标识" prop="code">
          <el-input v-model="rangeForm.code" placeholder="请输入标识" autocomplete="off" />
        </el-form-item>

        <el-form-item label-width="120px" label="类型" prop="coordType">
          <el-select v-model="rangeForm.type" placeholder="请选择" style="width: 100%;" @change="changeTangeType">
            <el-option
              v-for="item in typeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label-width="120px" label="坐标类型" prop="coordType">
          <el-select v-model="rangeForm.coordType" placeholder="请选择" style="width: 100%;">
            <el-option
              v-for="item in coordTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label-width="120px" label="圆心坐标" prop="center" v-if="rangeForm.type=='1'">
          <el-input v-model="rangeForm.center"   label="请输入圆心坐标" style="width: 100%;"></el-input>
        </el-form-item>

        <el-form-item label-width="120px" label="半径" prop="radius" v-if="rangeForm.type=='1'">
          <el-input-number v-model="rangeForm.radius"   label="请输入半径" style="width: 100%;"></el-input-number>
        </el-form-item>

        <el-form-item label-width="120px" label="高度类型" prop="coordZType">
          <el-select v-model="rangeForm.coordZType" placeholder="请选择" style="width: 100%;">
            <el-option
              v-for="item in coordZTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label-width="120px" label="高度" prop="coordZ">
          <el-input-number v-model="rangeForm.coordZ"   label="请输入高度" style="width: 100%;"></el-input-number>
        </el-form-item>

        <el-form-item label-width="120px" label="样式" prop="styleType">
          <el-input v-model="rangeForm.styleType" placeholder="请输入样式" autocomplete="off" />
        </el-form-item>

        <el-form-item label-width="120px" label="颜色" prop="color">
           <el-color-picker v-model="rangeForm.color" size="medium"></el-color-picker>
        </el-form-item>

        <el-form-item label-width="120px" label="围栏高度" prop="rangeHeight">
          <el-input-number v-model="rangeForm.rangeHeight"   label="请输入围栏高度" style="width: 100%;"></el-input-number>
        </el-form-item>

        <el-form-item label-width="120px" label="底部轮廓线宽度" prop="strokeWeight">
          <el-input-number v-model="rangeForm.strokeWeight"   label="请输入底部轮廓线宽度" style="width: 100%;"></el-input-number>
        </el-form-item>

        <el-form-item label-width="120px" label="底部填充类型" prop="fillArea">
          <el-input v-model="rangeForm.fillArea"   label="请输入底部区域填充类型" style="width: 100%;"></el-input>
        </el-form-item>

        <el-form-item label-width="120px" label="坐标" prop="points" v-if="rangeForm.type=='0'">

            <vue-json-editor
                    v-model="rangeForm.points"
                    :showBtns="false"
                    :mode="'code'"
                    lang="zh"
                    :expandedOnStart="true"
                   />

        </el-form-item>

        <el-form-item label-width="120px" label="内环坐标" prop="innerPoints" v-if="rangeForm.type=='0'">

             <vue-json-editor
                     v-model="rangeForm.innerPoints"
                     :showBtns="false"
                     :mode="'code'"
                     lang="zh"
                     :expandedOnStart="true"
                    />


        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closed">取 消</el-button>
        <el-button type="primary" :loading="buttonLoading" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  saveSceneRange,
  getSceneRangeById
} from '@/api/51world/sceneSrcRange.js'

	import vueJsonEditor from 'vue-json-editor'

import {
  isOk
} from '@/utils/request'
export default {
  name: 'RangeInfoDialog',
   components: { vueJsonEditor },
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dialogData: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      visible: false,
      title: '',
      buttonLoading: false,
      rangeForm: {
        id: '',
        srcId:'',
        sceneId:'',
        name: '',
        code: '',
        type: '1',
        coordType: 0,
        coordZ: 0,
        coordZType: 0,
        styleType: '',
        color: '',
        rangeHeight: 0,
        strokeWeight: 0,
        points: [],
        innerPoints: [],
        center: '',
        radius: 20,
        fillArea:'',
        from:'0',
      },
      coordTypeOptions:[
        {
          value: 0,
          label: '经纬度坐标'
        },
        {
          value: 1,
          label: 'cad坐标'
        }
      ],
      coordZTypeOptions:[
        {
          value: 0,
          label: '相对3D世界表面'
        },
        {
          value: 1,
          label: '相对3D世界地面'
        },
        {
          value: 2,
          label: '相对3D世界海拔'
        },
      ],
      typeOptions:[
        {
          value: '0',
          label: '多边形'
        },
        {
          value: '1',
          label: '圆形'
        }
      ],
      rules: {
        name: [{
          required: true,
          message: '请输入名称',
          trigger: 'blur'
        },
        {
          min: 2,
          max: 50,
          message: '长度在 2 到 50 个字符',
          trigger: 'blur'
        }
        ],
      }
    }
  },
  computed: {

  },
  watch: {
    dialogVisible: {
      handler: function(value) {
        this.visible = value
      },
      immediate: true,
      deep: false
    },
    dialogData: {
      handler: function(nValue) {
        if (nValue) {
          if(nValue.id){
             this.title = '编辑'
          }else{
            this.title = '新增'
          }
          this.rangeForm.id = nValue.id || ''
          this.rangeForm.sceneId = nValue.sceneId || ''
          this.rangeForm.srcId = nValue.srcId || ''
          this.rangeForm.name = nValue.name || ''
          this.rangeForm.code = nValue.code || ''
          this.rangeForm.type = nValue.type || '1'
          this.rangeForm.coordType = nValue.coordType || 0
          this.rangeForm.coordZ = nValue.coordZ || 0
          this.rangeForm.coordZType = nValue.coordZType || 0
          this.rangeForm.styleType = nValue.styleType || ''
          this.rangeForm.color = nValue.color || ''
          this.rangeForm.rangeHeight = nValue.rangeHeight || 0
          this.rangeForm.strokeWeight = nValue.strokeWeight || 0
          if(nValue.points){
            this.rangeForm.points = JSON.parse(nValue.points) || []
          }else{
            this.rangeForm.points=[]
          }

          if(nValue.innerPoints){
            this.rangeForm.innerPoints = JSON.parse( nValue.innerPoints) || []
          }else{
            this.rangeForm.innerPoints =[]
          }

          this.rangeForm.center = nValue.center || ''
          this.rangeForm.radius = nValue.radius || 20
          this.rangeForm.fillArea = nValue.fillArea || 'none'
          this.rangeForm.from= nValue.from || '0'

        }
        else{
           this.title = '新增'
        }
      },
      immediate: true,
      deep: false
    }
  },
  mounted: function() {
  },
  created() {
    if(this.rangeForm.id){
      this.getSceneRangeById();
    }
  },
  methods: {
    changeTangeType(val){
    },
    submitForm: function() {
      this.$refs.rangeForms.validate((valid) => {
        if (valid) {
          this.buttonLoading = true
          this.rangeForm.innerPoints = JSON.stringify( this.rangeForm.innerPoints)
          this.rangeForm.points=JSON.stringify(this.rangeForm.points);
          saveSceneRange(this.rangeForm).then(rsp => {
            if (isOk(rsp)) {
                this.$message({
                  type: 'success',
                  message: '成功!'
                })
              this.buttonLoading = false
              this.closed()
            }
          })
          this.rangeForm.innerPoints = JSON.parse( this.rangeForm.innerPoints)
          this.rangeForm.points=JSON.parse(this.rangeForm.points);
        }
      })
    },
    getSceneRangeById(){
      this.buttonLoading = true
      getSceneRangeById({
        id:this.rangeForm.id
      }).then(rsp => {
        if (isOk(rsp)) {
          const nValue=rsp.data;
          this.rangeForm.id = nValue.id || ''
          this.rangeForm.srcId = nValue.srcId || ''
          this.rangeForm.name = nValue.name || ''
          this.rangeForm.code = nValue.code || ''
          this.rangeForm.type = nValue.type || '1'
          this.rangeForm.coordType = nValue.coordType || 0
          this.rangeForm.coordZ = nValue.coordZ || 0
          this.rangeForm.coordZType = nValue.coordZType || 0
          this.rangeForm.styleType = nValue.styleType || ''
          this.rangeForm.color = nValue.color || ''
          this.rangeForm.rangeHeight = nValue.rangeHeight || 0
          this.rangeForm.strokeWeight = nValue.strokeWeight || 0
          if(nValue.points){
            this.rangeForm.points = JSON.parse(nValue.points) || []
          }else{
            this.rangeForm.points=[]
          }
          if(nValue.innerPoints){
            this.rangeForm.innerPoints = JSON.parse( nValue.innerPoints) || []
          }else{
            this.rangeForm.innerPoints =[]
          }
          this.rangeForm.center = nValue.center || ''
          this.rangeForm.radius = nValue.radius || 20
          this.rangeForm.fillArea = nValue.fillArea || 'none'
          this.rangeForm.from= nValue.from || '0'
          this.buttonLoading = false
        }
      })
    },
    closed: function() {
      this.$emit('closed', false)
    }
  }
}
</script>

<style lang="scss">
  .info-dialog {

  }
</style>
